<template>
	<div>
		<nav class="nav">
			<ul>
				<li class="active" id="nav_1" v-on:click="initSalesReport(1)">
					<div class="nav-title font-lg">今日</div>
					<div class="nav-date color-primary">
						<p class="date-today">{{endDate}}</p>
					</div>
				</li>
				<li v-on:click="initSalesReport(2)" id="nav_2">
					<div class="nav-title font-lg">本周</div>
					<div class="nav-date color-primary">
						<p><span class="date-from">{{weekDate}}</span></p>
						<p class="date-today">{{endDate}}</p>
					</div>
				</li>
				<li v-on:click="initSalesReport(3)" id="nav_3">
					<div class="nav-title font-lg">本月</div>
					<div class="nav-date color-primary">
						<p><span class="date-from">{{monthDate}}</span></p>
						<p class="date-today">{{endDate}}</p>
					</div>
				</li>
				<li v-on:click="initSalesReport(4)" id="nav_4">
					<div class="nav-title font-lg">今年</div>
					<div class="nav-date color-primary">
						<p><span class="date-from">{{yearDate}}</span></p>
						<p class="date-today">{{endDate}}</p>
					</div>
				</li>
				<li v-on:click="initSalesReport(5)" id="nav_5">
					<div class="nav-title font-lg">累计</div>
					<div class="nav-date color-primary">
						<p><span class="date-from"></span></p>
						<p class="date-today"></p>
					</div>
				</li>
			</ul>
		</nav>
		<div class="sales-table">
			<div class="table-tips color-primary">注：签约数据以签约审核通过数据为准</div>
			<div class="tab-box" style="display: block;">

				<div id="fixed-table-container" class="fixed-table-container" style="max-height: 300px;">
					<table>
						<thead>
							<tr>
								<th table-data="项目名称">项目名称</th>
								<th table-data="类别">类别</th>
								<th table-data="签约面积">签约面积 </th>
								<th table-data="签约合同总额">签约合同总额</th>
								<th table-data="平均单价">平均单价</th>
								<th table-data="回款金额">回款金额</th>
							</tr>
						</thead>
						<tbody id="bodyHtml">
							
							<!--<tr >
								<td rowspan="3" class="table-fixed" table-data="项目名称">东方诚园</td>
								<td table-data="类别">1</td>
								<td table-data="签约面积">2</td>
								<td table-data="签约合同总额" >3</td>
								<td table-data="平均单价">4</td>
								<td table-data="回款金额">5</td>
							</tr>
							<tr>
								<td table-data="类别">1</td>
								<td table-data="签约面积">2</td>
								<td table-data="签约合同总额" >3</td>
								<td table-data="平均单价">4</td>
								<td table-data="回款金额">5</td>
							</tr>
							<tr >
									<td table-data="类别">1</td>
								<td table-data="签约面积">2</td>
								<td table-data="签约合同总额" >3</td>
								<td table-data="平均单价">4</td>
								<td table-data="回款金额">5</td>
							</tr>
							<tr >
								<td table-data="项目名称" class="table-fixed">K</td>
								<td table-data="类别" colspan="5" style="text-align: right;">L</td>
							</tr>
							-->

						</tbody>

					</table>
				</div>
			</div>
		</div>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				endDate: "",
				weekDate: "",
				monthDate: "",
				yearDate: "",
				reportList: ""
			}
		},
	
		mounted: function() {
			this.initSalesReport(1);
			this.initDate();
			fixTable(document.getElementById('fixed-table-container'))

		},
		methods: {
			initDate: function() {
				var _self = this;
				_self.endDate = _self.$moment().format('YYYY-MM-DD');
				_self.monthDate = _self.$moment().startOf('month').format("YYYY-MM-DD");
				_self.yearDate = _self.$moment().startOf('year').format("YYYY-MM-DD");
				_self.weekDate = _self.$moment().startOf('isoWeek').format("YYYY-MM-DD");
			},
			formatNumber: function(value) {
				if(value != null && value != "") {
					return value.toFixed(2);
				}
				return 0;
			},
			initSalesReport: function(index) {
				document.setTitle("销售报表");
				var loadIndex = layer.load(1, {
					shade: false
				});
				var navList = $(".nav li");
				for(var i = 0; i < navList.length; i++) {
					navList.eq(i).removeClass("active");
				}
				$("#nav_" + index).addClass("active");
				var _self = this;
				var url = _self.utilHelper.apiUrl + "/wordFlowData/queryProjectSignedInfo";
				var params = {
					index: index,
					userticket: _self.$route.params.userticket,
					userId: _self.$route.params.userid
				};
				_self.$http.post(url, params).then((response) => {
					var body = response.body;
					if(!body.success) {
						layer.alert(body.resultMessage);
					} else {
						var entityBody = body.entity;
						var html = "";
						for(var i = 0; i < entityBody.length; i++) {
							var list = entityBody[i].list[0];
								html += "<tr>";
								html += "<td rowspan='" + (entityBody[i].list.length+1) + "' class='table-fixed' table-data='项目名称'>" + entityBody[i].projectName + "</td>";
								html += "<td table-data='类别'>" + list.typeName + "</td>";
								html += "<td table-data='签约面积'>" + this.formatNumber(list.areaTotal) + "</td>";
								html += "<td table-data='签约合同总额' >" + this.formatNumber(list.amountTotal) + "</td>";
								html += "<td table-data='平均单价'>" + this.formatNumber(list.avgAmount) + "</td>";
								html += "<td table-data='回款金额'>" + this.formatNumber(list.backAmount) + "</td>";
								html += "</tr>";
								for(var j = 1; j < entityBody[i].list.length; j++) {
									var l = entityBody[i].list[j];
									html += "<tr>";
									html += "<td table-data='类别'>" + l.typeName + "</td>";
									html += "<td table-data='签约面积'>" + this.formatNumber(l.areaTotal) + "</td>";
									html += "<td table-data='签约合同总额' >" + this.formatNumber(l.amountTotal) + "</td>";
									html += "<td table-data='平均单价'>" + this.formatNumber(l.avgAmount) + "</td>";
									html += "<td table-data='回款金额'>" + this.formatNumber(l.backAmount) + "</td>";
									html += "</tr>";
								}
								
								
								
								html+="<tr>";
								var removalRate =  entityBody[i].removalRate;
								if(removalRate==null){
									removalRate="0%";
								}else{
									removalRate = removalRate+"%";
								}
								html+="<td table-data='项目名称' colspan='6' class='table-fixed'>开盘去化率:"+removalRate+"</td>";
								html+="</tr>";
						}
						
						$("#bodyHtml").html(html);
						fixTable(document.getElementById('fixed-table-container'))
					}
					layer.close(loadIndex);
				});
			}

		}
	}
</script>